<%--
  Created by IntelliJ IDEA.
  User: hanzhuang
  Date: 2021/4/9
  Time: 17:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="css/homepage.css" rel="stylesheet" type="text/css">
</head>
<style>
    #Hom-left {
        /*background-color: #333333;*/
    }

    #Hom-left span {
        cursor: pointer;
    }

    #Hom-right {
        background-color: #94d4f8;
    }

    #left-1 {
        margin-top: 50px;
        text-align: center;
    }

    #left-2 {
        margin-top: 50px;
        text-align: center;
    }

    #left-3 {
        margin-top: 50px;
        text-align: center;
    }

    .font-1 {
        font-weight: 700;
    }

    .bc-1 {
        margin: auto;
        width: 50%;
        background-color: #94d4f8;
    }

    #right-1 {
        margin-top: 50px;
    }

    #right-1 button {
        background-color: #089be8;
        cursor: pointer;
    }

    .finger {
        cursor: pointer;
    }

    #right-1s {
        margin-left: 500px;
    }
</style>

<body>
<div id="homepages">
    <div id="Hom-left">
        <div id="left-1">
            <div class="bc-1"><span>用户中心</span></div>
            <div><span>账号设置</span></div>
        </div>
        <div id="left-2">
            <div><span class="font-1"
                       onclick="javascript:window.location.href='http://localhost:8080/Carpool_war_exploded/Carpool_info.jsp'">长途拼车</span>
            </div>
            <div><span>发布的长途拼车</span></div>
            <div><span>申请加入的长途拼车</span></div>
            <div><span>设置拼车关注</span></div>
        </div>
        <div id="left-3">
            <div><span class="font-1">上下班拼车</span></div>
            <div><span>发布的上下班拼车</span></div>
            <div><span>申请加入的上下班拼车</span></div>
        </div>


    </div>
    <div id="Hom-right">
        <div id="right-1">
            <button id="but_1" onclick="show1()">所有</button>
            <button id="but_2" onclick="show2()">已同意加入</button>
            <button id="but_3" onclick="show3()">未同意加入</button>
            <button id="but_4" onclick="show4()">被退回</button>
            <span class="finger" id="right-1s">查看帮助</span>
        </div>
        <div id="right-2">
            <span>1</span>
        </div>
        <div id="right-3">
            <span>2</span>
        </div>
        <div id="right-4">
            <span>3</span>
        </div>
        <div id="right-5">
            <span>4</span>
        </div>
    </div>
</div>
</body>
<script>
    function show1() {
        document.getElementById("right-2").style.display = "block";
        document.getElementById("right-3").style.display = "none";
        document.getElementById("right-4").style.display = "none";
        document.getElementById("right-5").style.display = "none";
    }

    function show2() {
        document.getElementById("right-2").style.display = "none";
        document.getElementById("right-3").style.display = "block";
        document.getElementById("right-4").style.display = "none";
        document.getElementById("right-5").style.display = "none";
    }

    function show3() {
        document.getElementById("right-2").style.display = "none";
        document.getElementById("right-3").style.display = "none";
        document.getElementById("right-4").style.display = "block";
        document.getElementById("right-5").style.display = "none";
    }

    function show4() {
        document.getElementById("right-2").style.display = "none";
        document.getElementById("right-3").style.display = "none";
        document.getElementById("right-4").style.display = "none";
        document.getElementById("right-5").style.display = "block";
    }


</script>
</html>
